import BaseApp from './BaseApp';
import * as PIXI from 'pixi.js';

let EventEmitter = PIXI.utils.EventEmitter;

class EventObjct extends EventEmitter {}

class _01Draw extends BaseApp {
  public emitter: EventObjct = new EventObjct();

  start() {
    this.app = new PIXI.Application({
      view: this.element,
      resizeTo: this.element,
      antialias: true,
      transparent: false,
      resolution: 1,
      backgroundColor: 0x142220,
    });

    const rect = new PIXI.Graphics();
    rect
      .lineStyle(2, 0xff3300, 1)
      .beginFill(0x66ccff)
      .drawRect(-50, -50, 100, 100)
      .endFill();
    rect.position.set(100, 100);
    this.app.stage.addChild(rect);

    const rect2 = new PIXI.Graphics();
    //rect2.lineStyle(0, 0xff3300, 1);
    rect2
      .beginFill(0x66ccff)
      .drawRect(-50, -50, 100, 100)
      .endFill()
      .position.set(100, 250);
    this.app.stage.addChild(rect2);

    const rect3 = new PIXI.Graphics();
    rect3
      .lineStyle(4, 0xff3300, 1)
      .moveTo(0, 0)
      .lineTo(0, 100)
      .lineTo(100, 100)
      .lineTo(100, 0)
      .lineTo(0, 0);
    rect3.position.set(50, 350);
    this.app.stage.addChild(rect3);

    const rect4 = new PIXI.Graphics();
    rect4
      .lineStyle(6, 0xffff00, 1)
      .beginFill(0x66ccff)
      .drawEllipse(0, 0, 50, 50)
      .endFill()
      .beginHole()
      .drawEllipse(0, 0, 50, 50)
      .endHole();
    rect4.position.set(100, 550);
    this.app.stage.addChild(rect4);

    const msg = new PIXI.Text(
      'Hello Pixi!',
      new PIXI.TextStyle({
        fontFamily: 'Arial',
        fontSize: 36,
        fill: 0x00ffff,
        stroke: '#ff3300',
        strokeThickness: 4,
        dropShadow: true,
        dropShadowColor: '#000000',
        dropShadowBlur: 4,
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 6,
      })
    );

    msg.position.set(200, 50);
    this.app.stage.addChild(msg);

    this.emitter.once(
      'testEvent',
      (val) => {
        console.log('Event Emitter: val=' + val);
      },
      'abc'
    );

    this.app.ticker.add((delta) => {
      console.log('ticker.');
    });

    this.app.ticker.addOnce((delta) => {
      this.emitter.emit('testEvent');
    });

    let json: { a: string; b: number } = JSON.parse('{"a":"aaa", "b":12}');
    console.log(json.a, '  ', json.b);
  }
}

export default new _01Draw();
